<template>
  <ContentWrap :style="`height: ${contentHeight}px;`">
    <div class="routeHeader">
      <el-button plain  @click="goBack" > 关闭</el-button>
    </div>
    <el-scrollbar :max-height="`${contentHeight - 73}px`">
      <el-form
        ref="formRef"
        :inline="true"
        :model="formData"
        label-width="100px"
        v-loading="formLoading"
      >
        <el-form-item label="入库单号" prop="storageNumber">
          <el-input v-model="formData.storageNumber" placeholder="" disabled />
        </el-form-item>
        <el-form-item label="入库人" prop="storageName">
          <el-input v-model="formData.storageName" placeholder="" disabled />
        </el-form-item>
        <el-form-item label="入库日期" prop="storageTime">
          <el-input v-model="formData.storageTime" placeholder="" disabled />
        </el-form-item>
      </el-form>
      <el-table
        v-loading="formLoading" 
        :data="list" 
        show-summary
        :summary-method="getSummaries"
        border
        ref="multipleTableRef"
      >
        <el-table-column label="序号" align="center" type="index" width="60px" fixed="left" />
        <template v-for="item, index in tableTitleList" >
          <el-table-column 
            v-if="item.isTable"
            :key="index" 
            :min-width="item.width" 
            :label="item.label" 
            :prop="item.field" 
            :align="item.align"
            :header-align="item.headerAlign"
          >
            <template #default="scope">
              <dict-tag :type="item.dictType" :value="scope.row[item.field]" v-if="item.dictType" />
              <div v-else>{{ scope.row[item.field] }}</div>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getData"
      />
    </el-scrollbar>
  </ContentWrap>
</template>
<script setup lang="ts">
import * as OutboundStorageOrderApi from '@/api/outsource/outsourceInAndOutStorage/outboundStorageOrder'
import { useTagsViewStore } from '@/store/modules/tagsView'

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  storageNumber: undefined,
  storageName: undefined,
  storageTime: undefined,
  details: []
})
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  storageOrderId  : undefined,
})
const formRef = ref() // 表单 Ref

const list = ref([])
const total = ref(0) // 列表的总页数
const query = useRoute().query as any
const contentHeight = ref(0)
const tableTitleList = [
  {
    isTable: true,
    width: '200px',
    label: '产品编号',
    field: 'productNumber',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '部件编号',
    field: 'partNumber',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '部件名称',
    field: 'partName',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '图纸图号',
    field: 'drawingNumber',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '部件规格',
    field: 'partSpecification',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '材质',
    field: 'material',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '规格',
    field: 'specification',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '净尺寸  (长)',
    field: 'netSizeLength',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '净尺寸  (宽)',
    field: 'netSizeWidth',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '下料尺寸(长)',
    field: 'cuttingSizeLength',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '下料尺寸(宽)',
    field: 'cuttingSizeWidth',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '库存数量',
    field: 'stockQuantity',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '出库数量',
    field: 'outboundDeliveryQuantity',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '库位',
    field: 'storageLocation',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '单位',
    field: 'partUnit',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  },
  {
    isTable: true,
    width: '200px',
    label: '工序名称',
    field: 'dictProcessName',
    align: 'left',
    headerAlign: 'left',
    dictType: 'craft_process_name'
  },
  {
    isTable: true,
    width: '200px',
    label: '工种',
    field: 'dictTypeOfWork',
    align: 'left',
    headerAlign: 'left',
    dictType: 'config_manufacturing_details_cutting_process'
  },
  {
    isTable: true,
    width: '200px',
    label: '下料类型',
    field: 'dictBaitingType',
    align: 'left',
    headerAlign: 'left',
    dictType: 'config_wage_baiting_type'
  },
  {
    isTable: true,
    width: '200px',
    label: '是否机加',
    field: 'dictIsMachine',
    align: 'left',
    headerAlign: 'left',
    dictType: 'is_machining'
  },
  {
    isTable: true,
    width: '200px',
    label: '机加工序',
    field: 'dictMachiningProcess',
    align: 'left',
    headerAlign: 'left',
    dictType: 'machining_process'
  },
  {
    isTable: true,
    width: '200px',
    label: '需求交期',
    field: 'requirementTime',
    align: 'left',
    headerAlign: 'left',
    dictType: ''
  }
]

/** 获取数据 */
const getData = async () => {
  formLoading.value = true
  try {
    const data = await OutboundStorageOrderApi.getOutboundStorageOrder(queryParams.value)
    formData.value = data
    list.value = data.details.list
    total.value = data.details.total
  } finally {
    formLoading.value = false
  }
}

// 返回
const tagsViewStore = useTagsViewStore()
const { currentRoute, push } = useRouter() // 路由
const goBack = async () => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(currentRoute.value)
  push('/outsource/outsource/warehousingOutbound/outboundDeliveryOrder')
}

// 合计行
const getSummaries = (param) => {
  const { columns, data } = param
  const sums: string[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (['stockQuantity', 'outboundDeliveryQuantity'].includes(column.property)) {
      if (!values.every((value) => isNaN(value))) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return (parseFloat(prev) + parseFloat(curr)).toFixed(2)
          } else {
            return parseFloat(prev).toFixed(2)
          }
        }, 0)
      } else {
        sums[index] = ''
      }
    }
  })
  return sums
}

onMounted(async () => {
  queryParams.value.storageOrderId   = query.id
  contentHeight.value = document.body.clientHeight - 125
  await getData()
})
</script>
